<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      border-collapse: collapse;
    }

    table td,
    table th {
      border: 1px solid #ccc;
      padding: 15px;
    }
    .active{
      color: red;
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>注册时间</th>
      </tr>
    </thead>
    <tbody id="data">
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>2022-09-14</td>
      </tr>
    </tbody>
  </table>
  <p class="page">
    <button>上一页</button>
    <button onclick="view(1)">1</button>
    <button onclick="view(2)">2</button>
    <button onclick="view(3)">3</button>
    <button>下一页</button>
  </p>
  <script>
    var stus = [
      { id: 1, name: '张三', age: 18, createDate: '2022-09-14' },
      { id: 2, name: '李四', age: 20, createDate: '2022-09-14' },
      { id: 3, name: '王五', age: 20, createDate: '2022-09-14' },
      { id: 4, name: '小白', age: 21, createDate: '2022-09-14' },
      { id: 5, name: '小明', age: 21, createDate: '2022-09-14' },
      { id: 6, name: '小张', age: 22, createDate: '2022-09-14' },
      { id: 7, name: '小花', age: 22, createDate: '2022-09-14' },
      { id: 8, name: '小兰', age: 19, createDate: '2022-09-14' },
    ]

    // page为当前页
    function view(page = 1) {
      // 每页显示的记录数
      var perpage = 3
      // 记录的总数
      var total = stus.length

      // 总页数,  Math.ceil()上舍入 ，Math.ceil(2.0001) === 3
      var pagecount = Math.ceil(total / perpage)
      console.log(pagecount);

      // 截取开始位置
      var start = (page - 1) * perpage
      // 截取结束位置
      var end = start + perpage

      // 截取得到分页之后的数据
      var pageData = stus.slice(start, end)



      var temp = ''
      pageData.forEach(function (item) {
        // temp+='<tr>'+
        //           '<td>'+
        //               item.id +
        //           '</td>'+
        //           '<td>'+
        //               item.name +
        //           '</td>'+
        //           '<td>'+
        //               item.createDate +
        //           '</td>'+
        //       '</tr>'
        temp += `<tr>
                  <td>${item.id}</td>
                  <td>${item.name}</td>
                  <td>${item.createDate}</td>
              </tr>`
      })
      document.getElementById('data').innerHTML = temp




      // 累加得到渲染页码的html代码
      var page_temp = `<button onclick="view(${page-1})" 
                        ${page===1 && 'disabled'}>
                        上一页</button>`
      for(var i=1;i<=pagecount;i++){
        page_temp+=`<button onclick="view(${i})" 
        class="${page===i ? 'active':''}">${i}</button>`
      }
      page_temp+=`<button onclick="view(${page+1})" 
                  ${page === pagecount && 'disabled'}>
                  下一页</button>`
      // 通过css选择器去查找元素,将page_temp累加的html代码
      //  插入.page这个容器
      document.querySelector('.page').innerHTML=page_temp
    }
    view()
  </script>
</body>

</html>